<template>
    <div>
      userDetail:
          {{id}}号用户 <br>
          姓名: {{name}} <br>
          年龄: {{age}} <br>
    </div>
</template>

<script>
    export default {
        name: "userDetail",
        props:["id","name","age"],
        mounted(){
          console.log("userDetail mounted")
        },
        watch:{
          //当动态路由被切换时 组件会被复用 所以所有的生命周期钩子都不会得到调用
          //为了能在动态路由切换时 我们可以做出一点响应 我们可以选择监听$route
          //因为在动态路由被切换时 $route是肯定要产生变化的
          $route:{
            deep:true,
            handler(){
              console.log("handler for watch userDeatil")
            }
          }
        }
    }
</script>

<style scoped>

</style>
